<template>
    <div class="sjhjCenter">
        <div class="sxChart">
            <div class="sxTitle">按市县分布统计</div>
            <div id="sxChart"></div>
        </div>
        <div class="lbChart">
            <div class="lbTitle">按类别统计</div>
            <div id="lbChart"></div>
        </div>
    </div>
</template>

<script>
    import ThemeTitle from "../../common/ThemeTitle"
    import {
        defineComponent,
        getCurrentInstance,
        onMounted,
        ref,
        provide 
    } from 'vue'
    import { useRouter } from 'vue-router'
    export default {
        components: {
            ThemeTitle
        },
        setup(){
            const title = provide("title","数据总览");
            const {ctx} = getCurrentInstance();
            function drawSXChart(){
                var dom = document.getElementById("sxChart");
                var myChart = ctx.$echarts.init(dom);
                let option = {
                        title: {
                            text: "政策补贴额度",
                            x: "center",
                            y:"4%",
                            textStyle: {
                                color: '#fff',
                                fontSize: '22'
                            },
                            subtextStyle: {
                                color: '#90979c',
                                fontSize: '16',

                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            top: '15%',
                            right: '3%',
                            left: '5%',
                            bottom: '12%'
                        },
                        xAxis: [{
                            type: 'category',
                            data: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他'],
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(255,255,255,0.12)'
                                }
                            },
                            axisLabel: {
                                margin: 10,
                                color: '#e2e9ff',
                                textStyle: {
                                    fontSize: 14
                                },
                            },
                        }],
                        yAxis: [{
                            name: '单位：万元',
                            axisLabel: {
                                formatter: '{value}',
                                color: '#e2e9ff',
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: 'rgba(255,255,255,1)'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(255,255,255,0.12)'
                                }
                            }
                        }],
                        series: [{
                            type: 'bar',
                            data: [5000, 2600, 1300, 1300, 1250, 1500],
                            barWidth: '20px',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                                    }], false),
                                    barBorderRadius: [30, 30, 30, 30],
                                    shadowColor: 'rgba(0,160,221,1)',
                                    shadowBlur: 4,
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    lineHeight: 30,
                                    width: 80,
                                    height: 30,
                                    backgroundColor: 'rgba(0,160,221,0.1)',
                                    borderRadius: 200,
                                    position: ['-8', '-60'],
                                    distance: 1,
                                    formatter: [
                                        '    {d|●}',
                                        ' {a|{c}}     \n',
                                        '    {b|}'
                                    ].join(','),
                                    rich: {
                                        d: {
                                            color: '#3CDDCF',
                                        },
                                        a: {
                                            color: '#fff',
                                            align: 'center',
                                        },
                                        b: {
                                            width: 1,
                                            height: 30,
                                            borderWidth: 1,
                                            borderColor: '#234e6c',
                                            align: 'left'
                                        },
                                    }
                                }
                            }
                        }]
                    }
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawLBChart(){
                var dom = document.getElementById("lbChart");
                var myChart = ctx.$echarts.init(dom);
                let option = {
                        legend: {
                            orient: 'vertical',
                            top: "center",
                            right: "5%",
                            data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7'],
                            textStyle: {
                                color: "#fff",
                                fontSize: 16
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        series: [{
                            name: '半径模式',
                            type: 'pie',
                            radius: ['30%', '80%'],
                            center: ['40%', '50%'],
                            roseType: 'radius',
                            label: {
                                show: true,
                                normal: {
                                    position: 'outside',
                                    fontSize: 16
                                }
                            },
                            labelLine: {
                                length: 1,
                                length2: 20,
                                smooth: true
                            },
                            data: [{
                                    value: 1,
                                    name: 'rose1',
                                    itemStyle: {
                                        color: "rgba(50,123,250,0.7)",
                                        borderColor: "rgba(50,123,250,1)",
                                        borderWidth: 3
                                    }
                                },
                                {
                                    value: 2,
                                    name: 'rose2',
                                    itemStyle: {
                                        color: "rgba(244,201,7,0.7)",
                                        borderColor: "rgba(244,201,7,1)",
                                        borderWidth: 3
                                    }
                                },
                                {
                                    value: 3,
                                    name: 'rose3',
                                    itemStyle: {
                                        color: "rgba(23,216,161,0.7)",
                                        borderColor: "rgba(23,216,161,1)",
                                        borderWidth: 3
                                    }
                                },
                                {
                                    value: 4,
                                    name: 'rose4',
                                    itemStyle: {
                                        color: "rgba(122,60,235,0.7)",
                                        borderColor: "rgba(122,60,235,1)",
                                        borderWidth: 3
                                    }
                                },
                                {
                                    value: 5,
                                    name: 'rose5',
                                    itemStyle: {
                                        color: "rgba(15,197,243,0.7)",
                                        borderColor: "rgba(15,197,243,1)",
                                        borderWidth: 3
                                    }
                                }
                            ]
                        }]
                    }
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            
            
            onMounted(()=>{
                drawSXChart()
                drawLBChart()
            })
            return {
               title
            }
        }
    }
</script>

<style lang="stylus" scoped>
  @import '../../../assets/varibles.styl'
  .sjhjCenter
        position:absolute
        bottom:0
        height:
        .sxChart
            .sxTitle
            #sxChart
        .lbChart
            .lbTitle
            #lbChart
</style>